{include file="public/header"/}
<style>
	html,body{background-color: #fff;}
	.editPopupBox{
		width: 100%;
		height: auto;
		padding: 20px 30px;
		box-sizing: border-box;
	}
    .hideFeild{
        position: absolute;
        top: 30px;
        left: 80px;
        width: 210px;
        border: solid 1px #ccc;
        background-color: #fff;
        max-height: 110px;
        overflow: auto;
    }
</style>
<div id="manage-wrap" class="manage-wrap editPopupBox">
    <form id="manage-form" action="#">
        <ul class="mod-form-rows cf">
            <li class="row-item">
                <div class="label-wrap"><label for="parent">上级分类</label></div>
                <div class="ctn-wrap">
                    <input type="text" value="{$info.parent}" class="ui-input" name="parent" id="parent" readonly="" style="width: 200px;">
                </div>
            </li>
            <li class="row-item">
                <div class="label-wrap"><span class="red spe_red">*</span><label for="name">类别：</label></div>
                <div class="ctn-wrap"><input type="text" value="{$info.name}" class="ui-input phone-group" name="name" id="name" style="width: 200px;">
                </div>
            </li>

            <input type="hidden" name="id" value="{$info.id}">
        </ul>
        
    </form>

    <!-- 选择上级分类弹窗 -->
    <div class="hideFeild" style="display: none;" id="parentBox">
        <ul id="filterSelectBox" class="ztree ztreeDefault showRoot"></ul>
    </div>
</div>

<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>
<script>
     $(document).ready(function () {

        // 父级树列表
        $('#filterSelectBox').tree({
            url: 'getCustomerCateTree.html',
            onClick: function (node) {
                //console.log(node);
            //    $("#supplier_category_id").val(node.id);
            $("#parent").val(node.name);
            $("#parentBox").hide();
            }
        });

        $("#parent").click(function(){
            var top=$(this).offset().top;
            var left=$(this).offset().left;
            $("#parentBox").toggle();
            $("#parentBox").css({"top": (top + 30) +"px","left":left +"px"});
        });

    });
    //选择客户类别-选择框外点击则隐藏
    $(document).mouseup(function (e) {
      if(e.target.id!="parent"){
            var con = $("#parentBox");   // 设置目标区域
            if (!con.is(e.target) && con.has(e.target).length === 0) {
              $("#parentBox").hide();
            }
        } 
    });
        


    $("#btn-add").click(function () {
        $.ajax({
            type: 'POST',
            url: "save.html",
            data: $("#manage-form").serialize(),
            dataType: "json",
            async: false,
            error: function (request) {
                alert("发送请求失败！");
            },
            success: function (data) {
                if (data.status == 1) {
                    alert(data.msg);
                } else {
                    alert(data.msg);
                }

            }
        });
    })
</script>
{include file="public/footer"/}